<!--
 * @Author: golddream
 * @Date: 2022-07-18 09:01:01
 * @LastEditors: Oscar Young
 * @LastEditTime: 2023-02-24 14:55:23
 * @Description:
-->
<template>
  <div class="main">
    <!-- 顶部header栏 -->
    <div class="header">
      <div class="max-w">
        <div class="h-h flex none">
          <img
            v-if="!store.web_logo"
            src="@/assets/image/logo.png"
            class="logo"
            alt=""
          />
          <img
            v-if="store.web_logo"
            :src="store.web_logo"
            class="logo"
            alt=""
            srcset=""
          />
          <div class="title" @click="jumpRoute('/')">
            {{ $t("common.home") }}
          </div>
          <div class="title" @click="jumpRoute('/game-catalog')">
            {{ $t("common.gameCatalog") }}
          </div>
          <div class="title" @click="jumpRoute('/ranking')">
            {{ $t("common.rank") }}
          </div>
          <div class="title" @click="jumpRoute('/enterprise-Introduction')">
            {{ $t("common.introduction") }}
          </div>
        </div>
        <div class="flex">
          <div class="button" @click="jumpRoute('/reserve')">
            {{ $t("common.BOOKNOW") }}
          </div>
          <changeLanguage
            class="language"
            :langList="langList"
          ></changeLanguage>
        </div>
      </div>
    </div>

    <!-- 顶部header栏 移动端 -->
    <div class="header-mobile">
      <img
        v-if="!store.web_logo"
        src="@/assets/image/logo.png"
        class="logo"
        alt=""
      />
      <img
        v-if="store.web_logo"
        :src="store.web_logo"
        class="logo"
        alt=""
        srcset=""
      />
      <div class="flex">
        <changeLanguage class="language" :langList="langList"></changeLanguage>
        <el-icon @click="drawer = true"><Expand /></el-icon>
      </div>
    </div>

    <!-- 内容主体 -->
    <div class="content">
      <router-view></router-view>
    </div>

    <!-- 底部footer栏 -->
    <div class="card4">
      <div class="b4 flex-wrap">
        <div class="b4-left w100">
          <img
            v-if="!store.web_logo"
            src="@/assets/image/logo.png"
            class="logo"
            alt=""
          />
          <img
            v-if="store.web_logo"
            :src="store.web_logo"
            class="logo"
            alt=""
            srcset=""
          />
          <div class="item" @click="jumpRoute('/')">
            {{ $t("common.home") }}
          </div>
          <div class="item" @click="jumpRoute('/game-catalog')">
            {{ $t("common.gameCatalog") }}
          </div>
          <div class="item" @click="jumpRoute('/ranking')">
            {{ $t("common.rank") }}
          </div>
          <div class="item" @click="jumpRoute('/enterprise-Introduction')">
            {{ store.store_name }}
          </div>
        </div>
        <div class="b4-right w100 flex-wrap">
          <div class="b4-right-left">
            <div class="big big-top">{{ $t("common.storeAddress") }}</div>
            <div class="small-block">
              <div class="small">{{ store.address }}</div>
            </div>
            <div class="big">{{ $t("common.contactPhoneNumber") }}</div>
            <div class="small-block">
              <div class="small">{{ store.store_phone }}</div>
            </div>
            <div class="big">{{ $t("common.businessHours") }}</div>
            <div class="small-block">
              <div class="small">{{ store.business_hours }}</div>
            </div>
            <img class="map-img" v-if="store.map_address_image" @click="openGoogleMaps(store.address)" :src="store.map_address_image" alt="">
          </div>
        </div>
        <div class="b4-right2 w100">
          <div class="title" @click="goToFqa">FAQ</div>
          <div
            class="title"
            v-for="(item, i) in issueList"
            :key="i"
            @click="goToIssueDetails(item.ad_id)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>

      <!-- 跳转三方媒体网站 -->
      <div class="third-party">
        <div class="img-wrap">
          <img
            src="https://cdn.sydon.cn/wechat-family/icon/facebook.png"
            title="Go to Facebook page"
          />
        </div>
        <div class="img-wrap">
          <img
            src="https://cdn.sydon.cn/wechat-family/icon/instagram.png"
            title="Go to Instagram page"
          />
        </div>
        <div class="img-wrap">
          <img
            src="https://cdn.sydon.cn/wechat-family/icon/tiktok.png"
            title="Go to Tiktok page"
          />
        </div>
        <div class="img-wrap">
          <img
            src="https://cdn.sydon.cn/wechat-family/icon/youtube.png"
            title="Go to Youtube page"
          />
        </div>
      </div>
      <div class="foot">© 2024 power by {{ store.store_name }}</div>
    </div>

    <!-- 底部footer栏 移动端 -->
    <div class="card4-mobile">
      <div class="b4 flex-wrap">
        <div class="b4-left w100">
          <img
            v-if="!store.web_logo"
            src="@/assets/image/logo.png"
            class="logo"
            alt=""
          />
          <img
            v-if="store.web_logo"
            :src="store.web_logo"
            class="logo"
            alt=""
            srcset=""
          />
          <div class="item" @click="jumpRoute('/')">
            {{ $t("common.home") }}
          </div>
          <div class="item" @click="jumpRoute('/game-catalog')">
            {{ $t("common.gameCatalog") }}
          </div>
          <div class="item" @click="jumpRoute('/ranking')">
            {{ $t("common.rank") }}
          </div>
          <div class="item" @click="jumpRoute('/enterprise-Introduction')">
            {{ store.store_name }}
          </div>
        </div>
        <div class="b4-right w100 flex-wrap">
          <div class="b4-right-left">
            <div class="big big-top">{{ $t("common.storeAddress") }}</div>
            <div class="small-block">
              <div class="small">{{ store.address }}</div>
            </div>
            <div class="big">{{ $t("common.contactPhoneNumber") }}</div>
            <div class="small-block">
              <div class="small">{{ store.store_phone }}</div>
            </div>
            <div class="big">{{ $t("common.businessHours") }}</div>
            <div class="small-block">
              <div class="small">{{ store.business_hours }}</div>
            </div>
            <img class="map-img" v-if="store.map_address_image" @click="openGoogleMaps(store.address)" :src="store.map_address_image" alt="">
          </div>
        </div>
        <div class="b4-right2 w100">
          <div class="title" @click="goToFqa">FAQ</div>
          <div
            class="title"
            v-for="(item, i) in issueList"
            :key="i"
            @click="goToIssueDetails(item.ad_id)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>

      <div class="third-party">
        <div class="img-wrap">
          <img
            @click="goToPage('facebook')"
            src="https://cdn.sydon.cn/wechat-family/icon/facebook.png"
            title="Go to Facebook page"
            alt=""
          />
        </div>
        <div class="img-wrap">
          <img
            @click="goToPage('instagram')"
            src="https://cdn.sydon.cn/wechat-family/icon/instagram.png"
            title="Go to Instagram page"
            alt=""
          />
        </div>
        <div class="img-wrap">
          <img
            @click="goToPage('tiktok')"
            src="https://cdn.sydon.cn/wechat-family/icon/tiktok.png"
            title="Go to Tiktok page"
            alt=""
          />
        </div>
        <div class="img-wrap">
          <img
            @click="goToPage('youtube')"
            src="https://cdn.sydon.cn/wechat-family/icon/youtube.png"
            title="Go to Youtube page"
            alt=""
          />
        </div>
      </div>

      <div class="foot">© 2024 power by {{ store.store_name }}</div>
    </div>

    <!-- 菜单抽屉 -->
    <el-drawer v-model="drawer" size="100%" show-close>
      <div class="title" @click="jumpRoute('/')">
        {{ $t("common.home") }}
      </div>
      <div class="title" @click="jumpRoute('/game-catalog')">
        {{ $t("common.gameCatalog") }}
      </div>
      <div class="title" @click="jumpRoute('/ranking')">
        {{ $t("common.rank") }}
      </div>
      <div class="title" @click="jumpRoute('/enterprise-Introduction')">
        {{ $t("common.introduction") }}
      </div>
      <div class="drawer-button" @click="jumpRoute('/reserveMobile')">
        {{ $t("common.BOOKNOW") }}
      </div>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import router, { routes } from "@/router";
import changeLanguage from "./change-language.vue";
import { initData, issue } from "@/modules/home/home.service";
import { themeConfig } from "@/assets/theme"
import { useUserStore } from "../../store/index";

const userStore = useUserStore();

const langList = ref([]);
const drawer = ref(false);
const store = ref({});
const issueList = ref([]);
const socialMedia = ref();

const  openGoogleMaps = (address:string) => {
  const formattedAddress = encodeURIComponent(address);
  const url = `https://www.google.com/maps/search/?api=1&query=${formattedAddress}`;
  window.open(url, '_blank');
}

const goToPage = (val:string) => {
  let url = socialMedia.value[val]
  window.open(url, "_blank");
}

const goToFqa = () => {
  window.scrollTo({ top: 0, behavior: "smooth" }); // 平滑滚动到顶部
  router.push("/faq");
};

const goToIssueDetails = (id: any) => {
  window.scrollTo({ top: 0, behavior: "smooth" }); // 平滑滚动到顶部
  router.push({ path: "/issueDetails", query: { id } });
};

const getdata = () => {
  initData().then((res) => {
    document.title = res.data.store.store_name;
    langList.value = res.data.store.custom.lang_list
      ? res.data.store.custom.lang_list
      : [];
    store.value = res.data.store;
    socialMedia.value = res.data.store.custom.social_media;
    localStorage.setItem("store", JSON.stringify(res.data.store));
    setTheme(res.data.store.custom.country)
  });
};

// 设置主题颜色、图片
const setTheme = (country:string) => {
  console.log(country,"country");
  
  if(country === 'Indonesia'){
    userStore.setThemeData(themeConfig.Indonesia as object);
  } else {
    userStore.setThemeData(themeConfig.Default as object);
  }
  document.documentElement.style.setProperty('--theme-color', userStore.themeData.themeColor);
  document.documentElement.style.setProperty('--theme-color-btn', userStore.themeData.themeColorBtn);
  document.documentElement.style.setProperty('--theme-color-home-btn', userStore.themeData.themeColorHomeBtn);
  document.documentElement.style.setProperty('--theme-color-header-footer', userStore.themeData.themeHeaderFooter);
  document.documentElement.style.setProperty('--theme-color-title-bg', userStore.themeData.themeTitleBg);
  document.documentElement.style.setProperty('--theme-color-ranking-bg', userStore.themeData.themeRankingBg);
  document.documentElement.style.setProperty('--theme-color-ranking-q', userStore.themeData.themeRankingQ);
  document.documentElement.style.setProperty('--theme-color-ranking-s', userStore.themeData.themeRankingS);
  console.log(userStore.themeData,"userStore.themeData");
}


const getIssue = () => {
  issue().then((res) => {
    if (res.status === 0) {
      issueList.value = res.data;
    }
    console.log(res, "issue");
  });
};
getdata();
getIssue();

// const isDev = import.meta.env.DEV;

const menus = ref<any>([]);
const fromFrontShim = (list: any[]) => {
  // 如果有数据
  if (list?.length > 0) {
    // 循环遍历数据，重构菜单数据
    list.forEach((child) => {
      // 如果节点没有meta，说明是带有route-view文件，生成的路由信息
      // 取出该节点的children[0]数据
      // 该节点特点是没有meta，有children[0]
      if (child?.children) {
        const subChild: any = child.children[0];
        // 取出该节点的path，给生成的子节点
        subChild.path = child.path;
        // 保存到数组中。
        menus.value.push(subChild);
      } else {
        // 递归，接着执行如上操作
        fromFrontShim(child.children);
      }
    });
  }
};

fromFrontShim(routes);

const jumpRoute = (path: any) => {
  if (path === "/reserveMobile") {
    if (
      JSON.parse(localStorage.getItem("custom")).reservation_mode ===
      "single_ticket"
    ) {
      path = "/reserveMobile2";
    } else {
      path = "/reserveMobile";
    }
  }
  if (path === "/reserve") {
    if (
      JSON.parse(localStorage.getItem("custom")).reservation_mode ===
      "single_ticket"
    ) {
      path = "/reserve2";
    } else {
      path = "/reserve";
    }
  }
  console.log("jumpRoute:", path);
  drawer.value = false;
  router.push(path);
};

const bottom = ["首页", "企业介绍", "排行榜"];
</script>

<style lang="scss" scoped>
/* 智能手机（普通手机和宽屏智能手机） */
@media only screen and (max-width: 768px) {
  .header {
    display: none !important;
    .logo {
      width: 300px;
    }
  }
  .header-mobile {
    padding: 20px;
    display: flex !important;
    background: var(--theme-color-header-footer);
    width: 100%;
    justify-content: space-between;
    .logo {
      width: 150px;
    }
    .el-icon {
      font-size: 22pt;
      color: #fff;
    }
  }
  :deep(.el-drawer) {
    background: var(--theme-color-header-footer);
    width: 100%;
    .el-drawer__close {
      color: #fff;
    }
    .title {
      color: #fff;
      font-size: 14pt;
      padding: 10px 0;
    }
    .drawer-button {
      margin-top: 20px;
      color: #fff;
      padding: 1rem 4rem;
      font-size: 12pt;
      background-color: #d817a8;
      display: table;
      align-items: center;
      justify-content: center;
    }
  }
  .card4 {
    display: none !important;
  }
  .card4-mobile {
    padding: 3rem 0;
    background: var(--theme-color-header-footer);
    width: 100%;
    display: flex !important;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .b4 {
      display: flex;
      padding: 0rem 3rem;
      flex-direction: column;
      flex-wrap: nowrap;
      width: 100%;
      .b4-left {
        width: auto;
        .logo {
          width: 100%;
          margin-bottom: 20px;
        }
        .item {
          cursor: pointer;
          margin-bottom: 0.25rem;
          font-size: 14pt;
          color: rgb(226 232 253);
        }
      }
      .b4-right {
        margin-top: 2rem;
        display: flex;
        flex-wrap: nowrap;
        width: auto;
        .b4-right-left {
          min-width: 300px;
          .big {
            font-size: 12px;
            margin-top: 0;
            font-weight: 600;
            color: rgb(226 232 253);
            margin-top: 0;
          }
          .small-block {
            font-size: 12px;
            padding-top: 0.5rem;
            padding-bottom: 1.5rem;
            color: rgb(226 232 253);
            .small {
              color: inherit;
              text-decoration: inherit;
            }
          }
        }
        .b4-right-right {
          max-width: 28rem;
          width: auto;
          padding-left: 5rem;
        }
      }
      .b4-right2 {
        margin-top: 20px;
        min-width: 255px;
        width: auto;
        .title {
          padding: 0 !important;
          margin-bottom: 10px;
          cursor: pointer;
          font-size: 12pt;
          color: rgb(226 232 253);
        }
      }
    }

    .third-party {
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: center;
      cursor: pointer;
      .img-wrap {
        background-color: #fff;
        border-radius: 50%;
        overflow: hidden;
        padding: 3px;
        margin: 0 10px;
        width: 30px;
        height: 30px;
        img {
          width: 100%;
        }
      }
    }

    .foot {
      margin-top: 20px;
      text-align: center;
      color: #fff;
    }
  }

  .map-img{
    width: 100% !important;
    height: 200px !important;
    cursor: pointer;
  }
}

.map-img{
  width: 450px;
  height: 250px;
  cursor: pointer;
}

/* 平板电脑 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .title {
    color: #fff;
    font-size: 14pt !important;
    padding: 0 1rem !important;
    cursor: pointer;
  }
  .logo {
    width: 200px;
  }
  .button {
    color: #fff;
    padding: 0rem 2rem !important;
    font-size: 14pt !important;
    background-color: #d817a8;
    height: 60px;
    // line-height: 60px;
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
  }
  .card4{
    .b4{
      flex-wrap: wrap;
    }
  }
}

// 定位居中，默认水平居中，可选择垂直居中，或者水平垂直都居中
@mixin position-center($type: x) {
  position: absolute;
  @if ($type == x) {
    left: 40%;
    transform: translateX(-50%);
  }
  @if ($type == y) {
    top: 40%;
    transform: translateY(-50%);
  }
  @if ($type == xy) {
    left: 40%;
    top: 40%;
    transform: translateX(-50%) translateY(-50%);
  }
}

.header-mobile {
  display: none;
}

.button {
  color: #fff;
  padding: 0rem 4rem;
  font-size: 16pt;
  background-color: #d817a8;
  height: 60px;
  // line-height: 60px;
  display: flex;
  align-items: center;
  text-align: center;
  cursor: pointer;
}
.notfound {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 700px;
  @include position-center(xy);
  .icon {
    width: 400px;
    height: 400px;
  }
  .content {
    h1 {
      margin: 0;
      font-size: 72px;
      color: #303133;
    }
    .desc {
      margin: 20px 0 30px;
      font-size: 20px;
      color: #606266;
    }
  }
}
.dev-title {
  margin: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
  box-sizing: border-box;
  color: var(--gua-page-title-title-color);
  background-color: var(--el-menu-bg-color);
  border-bottom: solid 1px var(--el-menu-border-color);
}
.dev-menu {
  height: calc(100vh - 51px);
}
body {
  background-color: red;
}
.nav__menu__container {
  overflow-y: hidden;
  overflow-x: auto;
}
.flex {
  display: flex !important;
  align-items: center;
}
.language {
  margin-left: 20px;
  color: #fff;
}
.content {
  min-height: calc(100vh - 494px);
}

.card4-mobile {
  display: none;
}

.card4 {
  padding: 3rem 0;
  background: var(--theme-color-header-footer);
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .b4 {
    display: flex;
    padding: 0rem 3rem;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1440px;
    .b4-left {
      width: auto;
      .item {
        margin-top: 10px;
        cursor: pointer;
        margin-bottom: 0.25rem;
        font-size: 14pt;
        color: rgb(226 232 253);
      }
      .logo {
        width: 300px;
      }
    }
    .b4-right {
      max-width: 50%;
      display: flex;
      flex-wrap: nowrap;
      margin-left: 2rem;
      margin-right: 2rem;
      width: auto;
      .b4-right-left {
        min-width: 300px;
        .big {
          font-size: 16pt;
          margin-top: 0;
          font-weight: 600;
          color: rgb(226 232 253);
          margin-top: 0;
        }
        .small-block {
          font-size: 14pt;
          padding-top: 0.5rem;
          padding-bottom: 1.5rem;
          color: rgb(226 232 253);
          .small {
            color: inherit;
            text-decoration: inherit;
          }
        }
      }
      .b4-right-right {
        max-width: 28rem;
        width: auto;
        padding-left: 5rem;
      }
    }

    .b4-right2 {
      min-width: 255px;
      width: auto;
      .title {
        padding: 0 !important;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 14pt;
        color: rgb(226 232 253);
      }
    }
  }

  .third-party {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    cursor: pointer;
    .img-wrap {
      background-color: #fff;
      border-radius: 50%;
      overflow: hidden;
      padding: 3px;
      margin: 0 10px;
      width: 30px;
      height: 30px;
      img {
        width: 100%;
      }
    }
  }

  .foot {
    margin-top: 20px;
    text-align: center;
    color: #fff;
  }
}
.max-w {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: 1440px;
  padding: 3rem;
}
.header {
  transition-duration: 0.7s;
  height: 115px;
  background: var(--theme-color-header-footer);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .h-h {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    align-items: center;
    .logo {
      width: 300px;
    }
  }
  .title {
    color: #fff;
    font-size: 16pt;
    padding: 0 2rem;
    cursor: pointer;
  }
}
</style>
<style>
.gua-aside-container {
  border-right: 1px solid var(--el-menu-border-color);
}
</style>
